<template>
  <div id="app">
    <div v-if="topInputShow">
      <el-form :inline="true" :model="selectSystemDept" class="demo-form-inline">
        <el-form-item label="部门名称">
          <el-input v-model="selectSystemDept.deptName" placeholder="请输入菜单部门名称"></el-input>
        </el-form-item>
        <el-form-item label="部门状态">
          <el-select v-model="selectSystemDept.status" placeholder="请选择部门状态">
            <el-option
                v-for="item in dictStatus"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="localDepts" icon="el-icon-search">查询</el-button>
          <el-button type="danger"  @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-button type="primary" @click="openAddDept" icon="el-icon-plus">添加</el-button>
      <el-tooltip content="隐藏搜索" placement="top" style="margin-left: 1320px">
        <el-button icon="el-icon-search" size="mini" circle @click="topInputShows"></el-button>
      </el-tooltip>
      <el-tooltip content="刷新" placement="top" >
        <el-button icon="el-icon-refresh" size="mini" circle @click="refresh"></el-button>
      </el-tooltip>
    </el-row>

    <el-table
        :data="depts"
        style="width: 100%;margin-bottom: 20px;"
        row-key="deptId"
        :tree-props="{children: 'childDept', hasChildren: 'hasChildren'}"
        default-expand-all>
      <el-table-column
          prop="deptName"
          label="部门名称"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          label="排序"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <label v-if="scope.row.status==0">正常</label>
          <label v-if="scope.row.status==1">停用</label>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              icon="el-icon-edit"
              type="text"
              size="mini"
              @click="openUpdateDept(scope.row)"
          >修改</el-button>
          <el-button
              icon="el-icon-plus"
              size="mini"
              type="text"
              @click="openAddDept(scope.row)"
          >新增</el-button>
          <el-button
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="tips(scope.row.deptId)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    添加部门-->
    <el-dialog top="2vh" title="添加部门" :visible.sync="dialogAddVisible" width="600px">
      <el-form :model="dept"  label-width="80px">
        <el-form-item label="上级部门"   :span="24">
          <el-cascader style="float: left"
                       v-model="dept.parentId"
                       :options="sysDeptTreeRoot"
                       :props="{emitPath:false,value:'deptId',label:'deptName',checkStrictly:'true',children:'childDept'}"
                       @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item inline label="部门名称" >
          <el-input v-model="dept.deptName" autocomplete="off" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item inline label="显示排序" >
          <el-input-number v-model="dept.orderNum" controls-position="right" :min="1"
                           :max="10"></el-input-number>
        </el-form-item>
        <el-form-item inline label="负责人" >
          <el-input v-model="dept.leader" autocomplete="off" placeholder="请输入负责人姓名"></el-input>
        </el-form-item>
        <el-form-item inline label="联系电话" >
          <el-input v-model="dept.phone" autocomplete="off" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item inline label="邮箱" >
          <el-input v-model="dept.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="状态" >
          <el-radio v-model="dept.status" label="0">正常</el-radio>
          <el-radio v-model="dept.status" label="1">停用</el-radio>
        </el-form-item>
        <el-form-item label="创建时间" >
          <el-date-picker
              v-model="dept.createTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <!--如果单选框选中的是按钮--->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" dialogAddVisible= false">取 消</el-button>
        <el-button type="primary" @click="addSysDept">确 定</el-button>
      </div>
    </el-dialog>

<!--    修改-->
    <el-dialog top="2vh" title="修改部门" :visible.sync="dialogUpdateVisible" width="600px">
      <el-form :model="dept"  label-width="80px">
        <el-form-item label="上级部门"   :span="24">
          <el-cascader style="float: left"
                       v-model="dept.parentId"
                       :options="sysDeptTreeRoot"
                       :props="{emitPath:false,value:'deptId',label:'deptName',checkStrictly:'true',children:'childDept'}"
                       @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item inline label="部门名称" >
          <el-input v-model="dept.deptName" autocomplete="off" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item inline label="显示排序" >
          <el-input-number v-model="dept.orderNum" controls-position="right" :min="1"
                           :max="10"></el-input-number>
        </el-form-item>
        <el-form-item inline label="负责人" >
          <el-input v-model="dept.leader" autocomplete="off" placeholder="请输入负责人姓名"></el-input>
        </el-form-item>
        <el-form-item inline label="联系电话" >
          <el-input v-model="dept.phone" autocomplete="off" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item inline label="邮箱" >
          <el-input v-model="dept.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="状态" >
          <el-radio v-model="dept.status" label="0">正常</el-radio>
          <el-radio v-model="dept.status" label="1">停用</el-radio>
        </el-form-item>
        <el-form-item label="创建时间" >
          <el-date-picker
              v-model="dept.createTime"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <!--如果单选框选中的是按钮--->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" dialogUpdateVisible= false">取 消</el-button>
        <el-button type="primary" @click="updateDept">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
export default {
  name: "DeptView",
  data(){
    return {
      topInputShow:true,
      depts:null,
      //模糊查询
      findDept:null,
      //添加或修改
      sysDeptTreeRoot:null,
      dialogAddVisible:false,//添加
      dialogUpdateVisible:false,//修改,
      dictStatus:"",//字典类型
      deptTree:{
        value: "deptId",
        label: "deptName",
        children: "children",
      },
      selectSystemDept:{
        deptName:"",
        status:"0",
      },

      dept:{
        deptId:"",
        parentId:"",
        ancestors:"",
        deptName:"",
        orderNum:"",
        leader:"",
        phone:"",
        email:"",
        status:"",
        delFlag:"",
        createBy:"",
        createTime:"",
        updateBy:"",
        updateTime:""
      }
    }
  },
  methods:{
    localDepts(){
      this.axios.get("find-dept2?deptName=" + this.selectSystemDept.deptName + "&status=" + this.selectSystemDept.status)
          .then(result =>{
            this.depts = result.data.data;
            console.log("-------this.depts--------")
            console.log( this.depts)
          })
      let typeName = "sys_normal_disable"
      this.axios.get("/sysDictData/getBySysDictTypeName/" + typeName)
          .then(res => {
            this.dictStatus = res.data.data;
            console.log(this.dictStatus)
          })
    },
    //重置
    reset(){
      this.deptName = ""
      this.status=""
      this.$router.go(0)
    },
    //隐藏模糊查询
    topInputShows(){
      this.topInputShow = !this.topInputShow;
    },
    refresh(){
      this.$router.go(0);
    },
    //删除提示
    tips(deptId,delFlagId) {
      this.delFlagId = delFlagId;
      this.deptId = deptId;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        // this.deleteRole(id);
        this.deleteDept(deptId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除
    deleteDept(deptId){
      this.axios.delete("dept/"+deptId)
          .then(result =>{
            if (result.data.code == 200){
              this.localDepts()
            }
          })
    },
    //打开添加对话框
    openAddDept(row) {
      this.nullDept()
      this.axios.get("deptTree")
          .then(result => {
            this.sysDeptTreeRoot = result.data.data
            this.dialogAddVisible = true
          })
      if (row == null){
        this.dept.parentId = '0'
      }else {
        this.dept.parentId = row.deptId
      }
        // this.dept.parentId = row.deptId
    },
    addSysDept() {
      this.axios.post("/dept", this.dept)
          .then(result => {
            this.dept.deptId = ""
            this.dialogAddVisible = false
            this.localDepts()

          })
    },
    //打开修改菜单对话框（和添加是一个对话框）
    openUpdateDept(row) {
      this.axios.get("deptTree")
          .then(result => {
            this.sysDeptTreeRoot = result.data.data
            this.dialogUpdateVisible = true
          })
      this.dept = JSON.parse(JSON.stringify(row))

    },
    // 修改
    updateDept() {
      this.axios.put("/dept-up", this.dept)
          .then(result => {
            this.dialogUpdateVisible = false
            this.localDepts()
          })
    },
    //添加下拉框修改事件
    handleChange() {
    },
    nullDept(){
      this.dept = {
        deptId:"",
        parentId:"",
        ancestors:"",
        deptName:"",
        orderNum:"",
        leader:"",
        phone:"",
        email:"",
        status:"",
        delFlag:"",
        createBy:"",
        createTime:"",
        updateBy:"",
        updateTime:""
      }
    }



  },
  mounted() {
    this.localDepts();
  }

}
</script>

<style scoped>
.demo-form-inline{
  position: relative;
  margin-left: -710px;
}


</style>